const msg = '你的婚礼！！'
function fn(){
    return '函数'
}
const list = ['html','css','react']
const obj = {
    name :'孟庆明',
    age:18,
    sex:'女'
}
const title = '这是一个介绍jsx语法的标题'
const str = '<h1>你好，庆明</h1>'

//JSX语法： 动态渲染数据： {变量名}
// 在需要使用到动态数据的地方替换成一对{}即可，在{}内加上变量名，即可动态渲染数据
// { 表达式 } ：能够返回结果的代码块，变量，数学运算，三元表达式，有return的函数，正则
// 常见函数（表达式）: map ,filter.every,some,include

export default function First(){
    return (
        <div>
            <h1 title={title}>{msg}</h1>
            <p>变量：{msg}</p>
            <p>数学运算：{10*10}</p>
            <p>三元表达式：{false ? '真' : '假'}</p>
            <p>函数表达式：{fn()+'游泳池'}</p>
            <p>{list[0]}</p>
            {/* <h1>{2>1}</h1>嵌套布尔值会自动忽略 */}
            <div>
                我喜欢的技术有下面几种：
                {
                    // 在jsx中循环渲染的每个子元素一定要拥有一个唯一的key值，该属性只能是数字或字符串，不建议使用索引
                    list.map(item => {
                        return <h2 key={item}>{item}</h2>
                    })
                }
            </div>
            <div style={{ color:'red',backgroundColor:'blue' }}>
                我叫{obj.name},我今年{obj.age},我的性别是{obj.sex}
            </div>
            <p>{str}</p>
        </div>
    )
}

